<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>a的值{{numbers.a}}</h2>
        <button @click="numbers.a++">改变a</button>
        <h2>b的值{{numbers.b}}</h2>
        <button @click="numbers.b++">改变a</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: "#root",
            data:{
                numbers: {
                    a: 1,
                    b: 2
                }
            },
        watch:{
            // 监视属性的完整写法
            // numbers:{
            //     immediate: true,
            //     deep:true, // 开启深度监视
            //     handler(){
            //         console.log('numbers改变了')
            //     }
            // },
            // 监视属性的简写方式，注意只有handler()时才能简写
            numbers(newVal,oldVal){
                console.log('numbers的值，',newVal,oldVal)
            }
        }
        })
        // // 监视属性的完整写法
        // vm.$watch('numbers',{
        //     immediate: true,
        //             deep:true, // 开启深度监视
        //             handler(){
        //                 console.log('numbers改变了')
        //     }
        // })
        // // 监视属性的简写方式，注意只有handler()时才能简写
        // vm.$watch('numbers',function(newVal,oldVal){
        //     console.log('numbers的值，',newVal,oldVal)
        // })
    </script>
</body>
</html>